<template>
  <v-list
    class="side-nav h-100"
    data-testid="position-absolute-left-sidebar"
    :width="LEFT_WIDTH - 1"
  >
    <!-- AI 智能体搜索入口按钮（当前仅显示图标，无具体逻辑） -->
    <div class="mt-2 mb-2 app-no-drag text-center" @click="onAiEntryClick">
      <v-btn class="ai-entry-btn" icon size="36" :title="t('sidebar.aiSearch')" variant="text">
        <img alt="AI Agent" class="ai-entry-icon" src="@/assets/ai-agent.svg" />
      </v-btn>
    </div>

    <v-slide-y-reverse-transition group hide-on-leave>
      <SidebarTabItem
        v-for="(sidebar, index) in sidebarStore.leftTabs"
        :key="sidebar.origin.id"
        :active="sidebar.origin.id === tabStore.activeTabId"
        :data-testid="`left-sidebar-tab-item-${index}`"
        density="default"
        :index="index"
        :tab="sidebar.origin"
        :web-contents-id="sidebar.data?.webContentsId"
      />
    </v-slide-y-reverse-transition>
    <v-divider class="my-1" />

    <AddTabBtn class="mt-2" direction="left" :icon-size="26" />
    <!-- 左下角设置区 -->
    <div class="side-nav-bottom-actions text-center app-no-drag">
      <v-btn
        density="comfortable"
        :icon="mdiAccount"
        variant="plain"
        @click="onProfileClick"
      ></v-btn>
    </div>
  </v-list>
</template>

<script lang="ts" setup>
import { mdiAccount } from '@mdi/js'
import { useI18n } from 'vue-i18n'
import { WINDOW_STYLE_CONSTANTS } from '~shared/constants/layout'
import { useSidebarStore } from '@/windows/layoutBrowser/stores/sidebar'
import { useTabStore } from '@/windows/layoutBrowser/stores/tab'
import AddTabBtn from '../common/AddTabBtn.vue'
import SidebarTabItem from './SidebarTabItem.vue'

const { t } = useI18n()
const { LEFT_WIDTH } = WINDOW_STYLE_CONSTANTS

defineProps<{
  width: number
}>()

const sidebarStore = useSidebarStore()
const tabStore = useTabStore()

function onAiEntryClick() {
  _pre_.browser.setActiveTab(0)
}

function onProfileClick() {
  // TODO: 打开个人设置弹窗或页面
  alert(t('sidebar.profileSettings'))
}
</script>

<style scoped>
.side-nav {
  margin-left: 1px;
}
.side-nav-bottom-actions {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
}

.ai-entry-btn {
  --v-theme-overlay-multiplier: 0.04;
  transform: scale(0.9);
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}
.ai-entry-btn:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 50px 10px rgba(233, 76, 80, 0.25));
}

.ai-entry-icon {
  width: 32px;
  height: 32px;
  display: block;
}

.side-nav {
  background:
    linear-gradient(
      135deg,
      rgba(var(--v-theme-background), 0.5) 0%,
      rgba(var(--v-theme-background), 0.5) 50%,
      rgba(var(--v-theme-background), 0.5) 100%
    ),
    linear-gradient(
      135deg,
      rgba(var(--v-theme-primary), 0.3) 0%,
      rgba(var(--v-theme-secondary), 0.1) 50%,
      rgba(var(--v-theme-primary), 0.3) 100%
    );
  backdrop-filter: blur(10px);
}
</style>

<i18n>
{
  "zhHans": {
    "sidebar": {
      "aiSearch": "AI 智能体搜索",
      "profileSettings": "个人设置"
    }
  },
  "en": {
    "sidebar": {
      "aiSearch": "AI Agent Search",
      "profileSettings": "Profile Settings"
    }
  }
}
</i18n>
